<template>
  <div class="authority-factor">
      <!-- @cell-click = cellClick -->
    <zk-table
      ref="table"
      sum-text="sum"
      index-text="#"
      :data="data"
      :columns="columns"
      :stripe="props.stripe"
      :border="props.border"
      :show-header="props.showHeader"
      :show-summary="props.showSummary"
      :show-row-hover="props.showRowHover"
      :show-index="props.showIndex"
      :tree-type="props.treeType"
      :is-fold="props.isFold"
      :expand-type="props.expandType"
      :selection-type="props.selectionType">
      <!-- <template slot="$expand" scope="scope">
        {{ `My name is ${scope.row.name},
           this rowIndex is ${scope.rowIndex}.`
         }}
      </template> -->
      <template slot="checkbox" slot-scope="scope">
        <!-- {{ scope.row.likes.join(',') }} -->
        <input type="checkbox" @change="changeCheckbox(scope)" />
      </template>
      <template slot="factor" slot-scope="scope">
      <!--   {{ scope.row}}-->
        <!-- :disabled="isDisabled(scope)" -->
        <input type="checkbox" v-for="item in scope.row.arr" :data-id="item.id"/>
      </template>
    </zk-table>
  </div>
</template>

<script>
export default {
  name: 'authorityFactor',
  components: {
  },
  data() {
    return {
      props: {
        stripe: false,
        border: false,
        showHeader: true,
        showSummary: false,
        showRowHover: true,
        showIndex: true,
        treeType: true,
        isFold: true,
        expandType: false,
        selectionType: false,
      },
      data: [

        {
          name: 'Jack',
          sex: 'male',
          likes: ['football', 'basketball'],
          score: 10,
          arr:[
            {
              "id": "29cf543f-4f0b-453d-9d1a-0ac4bbd89bcf22",
              "funcId": null,
              "name": "测试3",
              "remark": "测试"
            },
            {
              "id": "29cf543f-4f0b-453d-9d1a-0ac4bbd89bcf33",
              "funcId": null,
              "name": "测试4",
              "remark": "测试1"
            },
            {
              "id": "29cf543f-4f0b-453d-9d1a-0ac4bbd89bcf44",
              "funcId": null,
              "name": "测试2",
              "remark": "测试"
            }


          ],
          children: [
            {
              name: 'Ashley',
              sex: 'female',
              likes: ['football', 'basketball'],
              score: 20,
              children: [
                {
                  name: 'Ashley',
                  sex: 'female',
                  likes: ['football', 'basketball'],
                  score: 20,
                },
                {
                  name: 'Taki',
                  sex: 'male',
                  likes: ['football', 'basketball'],
                  score: 10,
                  children: [
                    {
                      name: 'Ashley',
                      sex: 'female',
                      likes: ['football', 'basketball'],
                      score: 20,
                    },
                    {
                      name: 'Taki',
                      sex: 'male',
                      likes: ['football', 'basketball'],
                      score: 10,
                      children: [
                        {
                          name: 'Ashley',
                          sex: 'female',
                          likes: ['football', 'basketball'],
                          score: 20,
                        },
                        {
                          name: 'Taki',
                          sex: 'male',
                          likes: ['football', 'basketball'],
                          score: 10,
                        },
                      ],
                    },
                  ],
                },
              ],
            },
            {
              name: 'Taki',
              sex: 'male',
              likes: ['football', 'basketball'],
              score: 10,
            },
          ],
        },
        {
          name: 'Tom',
          sex: 'male',
          likes: ['football', 'basketball'],
          score: 20,
          children: [
            {
              name: 'Ashley',
              sex: 'female',
              likes: ['football', 'basketball'],
              score: 20,
              children: [
                {
                  name: 'Ashley',
                  sex: 'female',
                  likes: ['football', 'basketball'],
                  score: 20,
                },
                {
                  name: 'Taki',
                  sex: 'male',
                  likes: ['football', 'basketball'],
                  score: 10,
                },
              ],
            },
            {
              name: 'Taki',
              sex: 'male',
              likes: ['football', 'basketball'],
              score: 10,
              children: [
                {
                  name: 'Ashley',
                  sex: 'female',
                  likes: ['football', 'basketball'],
                  score: 20,
                },
                {
                  name: 'Taki',
                  sex: 'male',
                  likes: ['football', 'basketball'],
                  score: 10,
                },
              ],
            },
          ],
        },
        {
          name: 'Tom',
          sex: 'male',
          likes: ['football', 'basketball'],
          score: 20,
        },
        {
          name: 'Tom',
          sex: 'male',
          likes: ['football', 'basketball'],
          score: 20,
          children: [
            {
              name: 'Ashley',
              sex: 'female',
              likes: ['football', 'basketball'],
              score: 20,
            },
            {
              name: 'Taki',
              sex: 'male',
              likes: ['football', 'basketball'],
              score: 10,
            },
          ],
        },
      ],
      columns: [
        {
          label: 'name',
          prop: 'name',
          width: '400px',
        },
        {
          label: '菜单授权',
          prop: 'checkbox',
          minWidth: '100px',
          type: 'template',
          template: 'checkbox',
        },
        {
          label: 'factor',
          prop: 'arr',
          minWidth: '200px',
          type: 'template',
          template: 'factor',
        },
      ],

      rowIndexAry: [],
    }
  },

  methods:{
    changeCheckbox(scope){
      // this.rowIndexAry.push(scope.rowIndex)
      // //console.log(this.rowIndexAry)
      //console.log(scope,1)
    },
    changeFactor(scope){
      //console.log(scope,2)
    },
    isDisabled(scope){
      // //console.log(this.rowIndexAry)
      //console.log(scope)
    }
  }
}
</script>

<style lang="scss" scoped>
.authority-factor {
}
</style>
